<template>
    <div class="Home">
        <div class="tools">
            <el-select v-model="cmOption.mode" style="width: 150px;">
                <el-option 
                    v-for="lang in langOptions" 
                    :key="lang.type" 
                    :value="lang.value" 
                    :label="lang.label"
                ></el-option>
            </el-select>

            <el-select v-model="cmOption.theme" style="width: 150px;">
                <el-option 
                    v-for="lang in themeOption" 
                    :key="lang.type" 
                    :value="lang.value" 
                    :label="lang.label"
                ></el-option>
            </el-select>

            <el-upload
                v-model:file-list="fileList"
                class="upload-demo"
                action="#"
                :auto-upload="false"
                multiple
                :on-remove="handleRemove"
                :limit="3"
                :on-exceed="handleExceed"
                :on-success="handleSuccess"
                :on-change="handleChange"
            >
                <el-button type="primary">上传yaml文件</el-button>
            </el-upload>

            <el-button
                type="primary"
                class="btn-next"
                @click="handleNext"
            >下一步</el-button>

            <el-button
                type="default"
                class="btn-dl"
                @click="downloadYaml"
            >下载yaml文件</el-button>
        </div>
        <codeEditor
            :code="code"
            :option="cmOption"
            @change="changeValue"
        ></codeEditor>

        <!-- 生成动态表单 -->
        <div class="form-list">
            <el-form v-if="formList.length" :model="form" style="width: 600px" label-width="100px">
                <el-form-item 
                    v-for="formItem in formList" 
                    :key="formItem.label" 
                    :label="formItem.label"
                >
                    <el-input 
                        :type="formItem.type" 
                        style="width: 200px" 
                        v-model="formItem.label"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">Create</el-button>
                    <el-button>Cancel</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
    import codeEditor from '@/components/codeEditor.vue'
    import { reactive, ref } from 'vue'


    // 要展示的数据
    const code = ref("# 示例 YAML 文件\nversion: '1.0'\nservices:\n  web:\n    image: nginx:latest\n    ports:\n      - \"80:80\"\n    volumes:\n      - ./html:/usr/share/nginx/html\n  database:\n    image: mysql:5.7\n    environment:\n      MYSQL_ROOT_PASSWORD: example\n      MYSQL_DATABASE: mydb");

    
    // 配置项
    const cmOption = reactive({
        mode: "text/x-yaml",
        hintOptions: {
            completeSingle: false
        },
        theme: '3024-day',
        lineWrapping: true,
        lint: true,
        lineNumbers: false,
        gutters: ["CodeMirror-lint-markers"],
    })
    // 代码编辑框值修改后触发
    function changeValue (val) {
        code.value = val
    }

    // 语言的选项
    const langOptions = ref([
        {
            label: 'JavaScript',
            value: 'text/javascript'
        },
        {
            label: 'Yaml',
            value: 'text/x-yaml'
        },
        {
            label: 'HTML',
            // value: 'text/htmlembedded'
            value: 'application/x-aspx'
        },
        {
            label: 'CSS',
            value: 'text/css'
        }
    ])
    // 主题的选项
    const themeOption = ref([
        {
            label: '3024-day',
            value: '3024-day'
        },
        {
            label: '3024-night',
            value: '3024-night'
        },
        {
            label: 'base16-dark',
            value: 'base16-light'
        },
        {
            label: 'darcula',
            value: 'darcula'
        },
         {
            label: 'dracula',
            value: 'dracula'
        }
    ])

    // 上传文件
    const fileList = ref([])

    // 移除
    function handleRemove () {

    }

    // 文件数量超过了
    function handleExceed () {

    }

    // 上传成功
    function handleSuccess () {
        
    }

    // 上传文件成功
    function handleChange (uploadFile, uploadFiles) {
        console.log(uploadFiles, 'uploadFiles');
        if (uploadFiles.length > 0) {
            const reader = new FileReader()
            reader.onload = function (e) {
                console.log(e, 'e');
                let val = e.currentTarget.result
                if (val) {
                    code.value = val
                }
            }
            reader.readAsText(uploadFiles[0].raw)
        }
    }

    // 下载文件
    function downloadYaml () {
        try {
            let blob = new Blob([code.value], { type: 'text/plain' });
            let objectUrl = URL.createObjectURL(blob);
            let a = document.createElement('a');
            document.body.appendChild(a);
            a.setAttribute('style', 'display:none');
            a.setAttribute('href', objectUrl);
            a.setAttribute('download', 'myYaml' + '.yaml');
            try {
                a.click();
            } catch (e) {
                navigator.msSaveBlob(blob, 'myYaml');
            }
            URL.revokeObjectURL(objectUrl);
        } catch (error) {
            console.log(error, 'error');
        }
    }

    // 点击进入下一步
    const formList = ref([])
    function handleNext () {
        try {
            let obj = window.jsyaml.load(code.value)
            console.log(obj, 'obj');
            
            let database = obj.services.database
            for (const key in database) {
                formList.value.push({
                    type: 'input',
                    label: key,
                    value: database[key]
                })
            }
        } catch (error) {
            console.log(error, 'error');
        }
    }

    const form = reactive({
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
    })
    const onSubmit = () => {
        console.log('submit!')
    }
    
</script>

<style lang="less" scoped>
.Home {
    text-align: left;
}
.tools {
    display: flex;
    margin-bottom: 10px;
}
.el-select + .el-select {
    margin-left: 10px;
}

.upload-demo {
    margin-left: 10px;
}

.btn-next {
    margin-left: 10px;
}

.btn-dl {
    position: absolute;
    right: 10px;
    margin-left: 10px;
}
.form-list {
    margin-top: 20px;
}
</style>